<template>
    <div class="upload-container">
      <a-upload
        name="file"
        :showUploadList="false"
        :customRequest="customRequest"
      >
        <a-button>
          <span v-if="!uploading">
            <upload-outlined></upload-outlined>
            上传
          </span>
          <span v-else>
            <a-spin :indicator="indicator" />
            {{ message }}
          </span>
        </a-button>
      </a-upload>
    </div>
  </template>

  
  
  <style lang="scss">
  .upload-container {
    background: #fbfbfd;
    background-size: 400% 400%;
    height: 100vh;
    width: 100wh;
    display: flex;
    justify-content: center;
    padding: 60px;
  }
  </style>
  
  <script lang="ts" setup>
  import {ref,h} from 'vue'
  import { UploadOutlined,LoadingOutlined } from "@ant-design/icons-vue";
  import { onFileChangeHandler } from "./fileUpload/utils/upload";

  const indicator = h(LoadingOutlined, {
    style: {
      fontSize: '24px',
    },
    spin: true,
  });
  
  const uploading = ref(false);
  const message = ref("");
  const result = ref("");
  
  
  // 自定义上传
  const customRequest =async (data:any) => {
    message.value="正在上传"
    uploading.value=true;
    result.value = await onFileChangeHandler(data.file);
    if(result.value){
      alert("上传成功");
    }
    uploading.value=false;
  };
  
  </script>
  